<template>
  <div class="main-page">
    <div>
      <div style="width: 100%; height: 657px;">
        <el-carousel :interval="4000" height="657px">
          <el-carousel-item v-for="(image, index) in actUrl" :key="index">
            <div style="display: flex; justify-content: center; width: 100%; height: 657px;">
              <img :src="image.url" alt="Image" style="height: 100%; width: 100%; object-fit: cover; " @click="jump(image.aid)">
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

    </div>
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <!-- 在这里放置顶部导航栏内容 -->
      <h1>招生管理系统</h1>
      <ul>
        <li><a href="#features">功能特点</a></li>
        <li><a href="#teaching">助力教学招生</a></li>
        <li><a href="#quality">提高生源质量</a></li>
        <!-- 其他导航项 -->
      </ul>
    </div>
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 功能特点部分 -->
      <section id="features" class="features-section">
        <h2>系统功能特点</h2>
        <p>
          招生管理系统自动化流程、智能数据分析、科学管理模式，提高管理效率与经营水平，改善传统管理模式的弊端。
        </p>
        <!-- 其他功能特点介绍 -->
      </section>

      <!-- 助力教学招生部分 -->
      <section id="teaching" class="teaching-section">
        <h2>助力教学招生</h2>
        <p>
          招生宣传工作的制度化、系统化、规范化与常态化，提高宣传效果，促进学校本生源质量的提升。
        </p>
        <!-- 其他相关信息 -->
      </section>

      <!-- 提高生源质量部分 -->
      <section id="quality" class="quality-section">
        <h2>提高生源质量</h2>
        <p>
          多渠道、多层次、全方位的招生宣传工作格局，助力教育事业更好地发展，符合国家、地方指导的工作方针。
        </p>
        <!-- 其他相关信息 -->
      </section>
      <!-- 可以添加其他内容区域，比如联系方式、合作伙伴等 -->
    </div>
    <!-- 底部 -->
    <div class="footer">
      <!-- 底部内容，比如版权信息、联系方式等 -->
      <p>&copy; 2023 招生管理系统</p>
    </div>
  </div>
</template>

<script>
import {getAllActUrl} from '../../../../api/activityUrl'
export default {
  inject: ['reload'],
  // 这里是组件的逻辑部分，可以在需要时添加
  data () {
    return {
      actUrl: [],
      showUrl: [],
      count: 5
    }
  },
  methods: {
    findAllActUrl () {
      getAllActUrl().then((res) => {
        this.actUrl = res
        // this.getRandomImage()
      })
    },
    // 获取随机的图片序列
    // getRandomImage () {
    //   const randomIndex = []
    //   for (let i = 0; i < this.count; i++) {
    //     let index = Math.floor(Math.random() * this.actUrl.length)
    //     while (randomIndex.includes(index)) {
    //       index = Math.floor(Math.random() * this.actUrl.length)
    //     }
    //     randomIndex.push(index)
    //   }
    //   this.showUrl = randomIndex.map((index) => this.actUrl[index])
    //   console.log(this.showUrl)
    // },
    jump (aid) {
      this.$router.push({name: 'activityDetail', params: {actId: aid}})
    }
    // getRandomImage () {
    //   const randomIndex = []
    //   for (let i = 0; i < this.count; i++) {
    //     let index = Math.floor(Math.random() * this.actUrl.length)
    //     while (randomIndex.includes(index)) {
    //       index = Math.floor(Math.random() * this.actUrl.length)
    //     }
    //     randomIndex.push(index)
    //   }
    //   this.showUrl = randomIndex.map((index) => this.actUrl[index])
    //   console.log(this.showUrl)
    // }
  },
  created () {

  },
  mounted () {
    this.findAllActUrl()
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
/* 可以在这里添加样式 */
/* 示例中的样式是简单的示范，请根据实际需要进行样式调整 */
.main-page {
  font-family: Arial, sans-serif;
  /* 可以设置背景色或其他样式 */
}

.top-nav {
  /* 设置顶部导航栏样式 */
  background-color: #706e6e;
  color: #fff;
  padding: 20px;
}

.top-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;
}

.top-nav ul li {
  margin-right: 20px;
}

.top-nav ul li a {
  color: #fff;
  text-decoration: none;
}

.main-content {
  padding: 40px;
}

.features-section,
.teaching-section,
.quality-section {
  margin-bottom: 50px;
}

.footer {
  background-color: #706e6e;
  color: #fff;
  text-align: center;
  padding: 20px;
}
/deep/ .el-table__header{
  background-color: transparent;
}
.el-table__header{
  background-color: transparent;
}
</style>
